import React, { Component } from "react"
import fetchData from '../util/fetch'
import { Button, Modal, Form, Input, message, DatePicker,Row,Col } from 'antd'
import { connect } from 'react-redux'
import { mapStateToProps, mapDispatchToProps } from '../util/store'
const FormItem = Form.Item
import { parse } from 'qs'
import  { Link } from 'react-router'


function  currentPosition(type,title) {
	if(type){
        if(type === '5-1-1'){
            return <Col span={24}><p>当前位置：<Link to="/">首页</Link>&gt;
				<Link to="/motherShare/1">新妈圈</Link>&gt;<span>{title}</span></p></Col>
        }
        else{
            let tempAry = type.split('-');
            if(tempAry[0] == 4){
                let tempStr = ''
                if(tempAry[1] == 1){
                    tempStr = '新闻动态'
                }
                else if(tempAry[1] == 2){
                    tempStr = '活动招募'
                }
                else if(tempAry[1] == 3){
                    tempStr = '母婴知识'
                }
                return <Col span={24}><p>当前位置：<Link to="/">首页</Link>&gt;
					<Link to="/activity/1">活动咨讯</Link>&gt;<Link to="/activity/3">{tempStr}</Link>&gt;<span>{title}</span></p></Col>
            }
        }
	}

	return ''
}


class DetailForm extends Component {
	constructor(props) {
		super(props)
		this.state = {
			detailData: {}
		}
	}
	
	getData(url, opts) {
		fetchData(url, opts, function (res) {
			console.log(res)
			let data = eval(res.data)
			this.setState({
				detailData: data
			})
		}.bind(this))
	}
	
	state = { visible: false }
	showModal = () => {
		this.setState({
			visible: true
		});
	}
	handleOk = (e) => {
		this.setState({
			visible: false
		});
	}
	handleCancel = (e) => {
		this.setState({
			visible: false
		});
	}
	
	componentDidMount() {
		let values = parse(location.search.substr(1));
        this.setState({
			type: values.type && values.type,
			id: Number(values.id)
		})
		this.getData("/crm/api/v1/web/news/findOneById", { "dataId": values.id })
	}
	
	onBack = (e) => {
		history.go(-1);
	}
	handleSubmit = (e) => {
		
		e.preventDefault();
		
		this.props.form.validateFields((err, values) => {
			const rangeValue = values['produceTime'].format('YYYY-MM-DD');
			const id = this.state.id && this.state.id;
			values.produceTime = rangeValue;
			if (!err) {
				let _this = this;
				fetch('/crm/api/v1/web/webApply/add', {
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({ ...values, id, type: 1 })
				}).then(function (res) {
					const { ok } = res;
					if (ok) {
						message.success("提交成功")
						_this.setState({
							visible: false
						});
					} else {
						message.error("保存错误");
					}
				})
			}
		})
	}

	handleChangePage=(id)=>{
        this.setState({
            id: Number(id)
        })
        this.getData("/crm/api/v1/web/news/findOneById", { "dataId": id })
	}
	
	render() {
		const { getFieldDecorator } = this.props.form;
		const formItemLayout = {
			labelCol: { span: 5 },
			wrapperCol: { span: 18 }
		};
        const {detailData} = this.state;
        console.log("detailData && detailData.prevId===>",detailData && detailData.prevId);

        return (
			<div className="detail">
				<div className="content detail-content">

					<Row className="activity-content-top">
						{currentPosition(detailData?detailData.type:'',detailData?detailData.title:'')}
					</Row>

					<h2>{detailData ? detailData.title : null}</h2>
					<div className="detailContent" dangerouslySetInnerHTML={{ __html: detailData ? detailData.content : null }}/>
					<div className="detail-btn">
						{/*{
							this.state.type && <span className="enroll" onClick={this.showModal}>马上报名</span>

						}
						<Button onClick={this.onBack.bind(this)}>返回</Button>*/}
						<Row>
							<Col span={12} className="pre-next-item">
								{
                                      detailData && detailData.prevId ?
										  <Link onClick={this.handleChangePage.bind(this,detailData.prevId)}>上一篇 : {detailData.prevTitle}</Link> :null
								}
							</Col>
							<Col span={12} className="pre-next-item text-right">
								{
                                    detailData && detailData.nextId ?
										<Link onClick={this.handleChangePage.bind(this,detailData.nextId)}>下一篇 : {detailData.nextTitle}</Link>:null
								}
								</Col>
						</Row>

					</div>
				
				</div>
				<Modal
					title={
						<div className="ModalTile ">
							<h3>活动报名表</h3>
							<p>请填妥以下孕产信息，我们的客服人员将尽快为您安排</p>
						</div>
					}
					key={this.state.visible}
					maskClosable={true}
					closable={true}
					style={{ width: '980px', margin: '0 auto' }}
					onCancel={ this.handleCancel.bind(this) }
					onOk={ this.handleOk.bind(this) }
					visible={this.state.visible}
					wrapClassName={"vertical-center-modal detailModal"}
				>
					<Form>
						<FormItem {...formItemLayout} label="孕妇姓名">
							{getFieldDecorator('name', {
								rules: [{ required: true, message: '请输入姓名' }]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="联系方式">
							{getFieldDecorator('phone', {
								rules: [{
									required: true,
									pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
									message: '请输入正确的手机号'
								}]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="预产期">
							{getFieldDecorator('produceTime', {
								rules: [{ required: false, message: '请输入预产期' }]
							})(
								<DatePicker />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="参加人数">
							{getFieldDecorator('number', {
								rules: [{ required: false, message: '请输入参加人数' }]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="停车">
							{getFieldDecorator('parking', {
								rules: [{ required: false, message: '' }]
							})(
								<Input />
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="试吃月子餐">
							<Input value={this.state.detailData ? this.state.detailData.title : ''}/>
						</FormItem>
						<FormItem {...formItemLayout} label="预约门店">
							{getFieldDecorator('store', {
								rules: [{ required: false, message: '' }]
							})(
								<Input />
							)}
						</FormItem>
						<Button onClick={this.handleSubmit.bind(this)}>确认报名</Button>
					</Form>
				</Modal>
			</div>
		);
	}
}

const Detail = Form.create()(DetailForm);


export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Detail);
